<template>
  <div class="search-bar-wrapper">
    <div class="search-bar">
      <el-input
        v-model="inputValue"
        :placeholder="placeholder"
        :clearable="clearable"
        @keyup.enter="$emit('search')"
        class="search-bar__input"
        :style="{ width }"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="search-bar__buttons">
        <el-button type="primary" @click="$emit('search')">搜索</el-button>
        <el-button @click="$emit('reset')">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'

type Props = {
  modelValue: string
  placeholder?: string
  width?: string
  clearable?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '',
  width: '300px',
  clearable: true
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'search': []
  'reset': []
}>()

const inputValue = ref(props.modelValue)

watch(() => props.modelValue, (newVal) => {
  if (newVal !== inputValue.value) {
    inputValue.value = newVal
  }
})

watch(inputValue, (newVal) => {
  if (newVal !== props.modelValue) {
    emit('update:modelValue', newVal)
  }
})
</script>

<style lang="scss" scoped>
.search-bar-wrapper {
  background-color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  
  &__input {
    width: 300px;
  }
  
  &__buttons {
    display: flex;
    gap: 8px;
  }
}
</style> 